<!--
 * @Author: your name
 * @Date: 2021-09-08 21:27:06
 * @LastEditTime: 2021-09-09 16:21:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \undefinedd:\练习\canvas时钟.html
-->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(204, 204, 204);
      }
      .clock {
        width: 300px;
        height: 300px;
        background-color: rgb(15, 15, 15);
        border-radius: 50px;
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <canvas width="300" height="300" id="canvas"></canvas>
    </div>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      console.log(ctx);
      //
      function drawPanel() {
        // ======
        ctx.translate(150, 150);
        ctx.beginPath();
        ctx.arc(0, 0, 130, 0, 2 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();
      }

      function hourNum() {
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        ctx.beginPath();
        ctx.font = "30px fangsong";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "black";
        for (var i = 0; i < arr.length; i++) {
          ctx.fillText(
            arr[i],
            108 * Math.cos(((i * 30 - 60) * Math.PI) / 180),
            108 * Math.sin(((i * 30 - 60) * Math.PI) / 180)
          );
        }
      }

      function centerDot() {
        ctx.beginPath();
        ctx.arc(0, 0, 8, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle = "gray";
        ctx.arc(0, 0, 5, 0, 2 * Math.PI);
        ctx.fill();
      }

      function hourHand(hours, minutes) {
        var radius =
          ((2 * Math.PI) / 12) * hours + (((1 / 6) * Math.PI) / 60) * minutes;
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.lineCap = "round";
        ctx.strokeStyle = "black";
        ctx.rotate(radius);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -50);
        ctx.stroke();
        ctx.restore();
      }

      function minuteHand(minutes) {
        2 * Math.PI;
        var radius = ((2 * Math.PI) / 60) * minutes;
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.lineCap = "round";
        ctx.strokeStyle = "black";
        ctx.rotate(radius);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -70);

        ctx.stroke();
        ctx.restore();
      }
      function secondHand(seconds) {
        var radius = ((2 * Math.PI) / 60) * seconds;
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.lineCap = "round";
        ctx.strokeStyle = "red";
        ctx.rotate(radius);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -90);
        ctx.stroke();
        ctx.restore();
      }

      /*         ctx.clearRect(0, 0, ctx.width, ctx.height);
        var time = new Date();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        minuteHand(minutes);
        secondHand(seconds);
        hourHand(hours, minutes); */
      function update() {
        var time = new Date();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        ctx.save();
        drawPanel();
        hourNum();
        secondHand(seconds);
        minuteHand(minutes);
        hourHand(hours, minutes);
        centerDot();
        ctx.restore();
      }
      update();
      setInterval(() => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        update();
      }, 1000);
    </script>
  </body>
</html>
